<template>
  <div class="mint-swipe">
    <div class="mint-swipe-items-wrap" ref="wrap">
      <slot></slot>
    </div>
     <div v-if="pages.length>0">
       <b v-for='(item,index) in pages' :class='[index==currentpage?"red":"blue"]' @click="changepage(index)">{{index}}</b>
     </div>
  </div>
</template>
<script>
  export default {
    name: 'mt-swipe',
    data(){
      return {
        currentpage:0
      }
    },
    props:{
      pages:''
    },
    mounted() {
      console.log(this.$children.length)
    },
    methods:{
      swipeItemCreated(item){
         console.log(item)
      },
      showIndicators(){

      },
      changepage(num){
       
         this.$children[this.currentpage].$el.classList.remove("red");
          this.currentpage=num;
        this.$children[num].$el.classList.add("red");

      }
    }
  };
</script>
<style scoped>
    b{
      padding:10px;
    }
    .red{
      color:red;
    }
</style>